/**

*/
import React, { PropTypes, PureComponent, Fragment } from 'react';
import { PrimaryC, SeriesProductsC, InputC, SelectC, DATA_ENTRY, AdvancedSearch, FirstHeaderC, TableC, SecondHeaderC, PrimaryGhostC, TradingDirectC } from '../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Card, Tabs, Input, Spin, Button, message, Table, Divider, DatePicker, Select, Modal } from 'antd';
import { connect } from 'dva';
import 'moment/locale/zh-cn';
import moment from 'moment';
const FormItem = Form.Item;

@Form.create()
class TradeAnalysisNew extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      listId: '', // 系列产品ID
      queryProductIdList: [], // 子产品下拉列表
      getInfo: undefined,
      isRequired: true, //是否必填
    };
  }

  componentDidMount() {
    const { listId } = this.props;
    //let listId = 'db08028c3d1b4e3ba3195fcfb603bb9d'
    //根据系列产品ID，获取资产下拉列表
    if (listId) {
      this.props.dispatch({
        type: 'cashOrderM/queryProductIdList',
        payload: {
          listId,
        },
        callback: (type, data) => {
          if (type == 'success') {
            this.setState({
              selectProductList: data.map((item) => {
                return { value: item.id, title: item.productcode + '-' + item.productname };
              }),
            });
          } else {
            this.setState({
              selectProductList: [],
            });
          }
        },
      });
    }
  }
  onOk = () => {
    const {
      form: { validateFields, resetFields },
    } = this.props;
    const { dispatch } = this.props;

    validateFields(['listId', 'productId', 'tradeDir', 'tradeAmount'], (err, fieldsValue) => {
      if (err) return;
      const getInfo = {
        listId: fieldsValue.listId,
        productId: fieldsValue.productId,
        tradeDir: fieldsValue.tradeDir,
        tradeAmount: fieldsValue.tradeAmount,
      };
      this.props.dispatch({
        type: 'cashOrderM/tradeEntry',
        payload: {
          ...getInfo,
        },
        callback: (type, data) => {
          if (type == 'success') {
            this.props.onOk();
            resetFields();
          }
        },
      });
    });
  };
  onCancel = () => {
    const {
      form: { validateFields, resetFields },
    } = this.props;
    resetFields();
    this.props.onCancel();
  };

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.props.listId !== nextProps.listId) {
      this.props.dispatch({
        type: 'cashOrderM/queryProductIdList',
        payload: {
          listId,
        },
        callback: (type, data) => {
          if (type == 'success') {
            this.setState({
              selectProductList: data.map((item) => {
                return { value: item.id, title: item.productname };
              }),
            });
          } else {
            this.setState({
              selectProductList: [],
            });
          }
        },
      });
    }
  }

  render() {
    const { isRequired } = this.state;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 4, offset: 0 },
        sm: { span: 8, offset: 0 },
        md: { span: 8, offset: 0 },
        lg: { span: 8, offset: 0 },
        xl: { span: 7, offset: 0 },
        xxl: { span: 5, offset: 0 },
      },
      wrapperCol: {
        xs: { span: 18, offset: 0 },
        sm: { span: 14, offset: 0 },
        md: { span: 14, offset: 0 },
        lg: { span: 14, offset: 0 },
        xl: { span: 15, offset: 0 },
        xxl: { span: 17, offset: 0 },
      },
    };
    return (
      <div style={{ height: '100%' }}>
        <Form>
          <Row style={{ marginBottom: '10px' }}>
            <Col span={12}>
              <SeriesProductsC form={this.props.form} dataIndex='listId' initialValue={this.props.listId ? this.props.listId : ''} disabled={true} />
            </Col>
            <Col span={12}>
              <FormItem label='产品' {...formItemLayout}>
                {getFieldDecorator('productId', {
                  rules: [{ required: true, message: '请选择产品' }],
                })(
                  <Select style={{ width: '100%' }}>
                    {this.state.selectProductList &&
                      this.state.selectProductList.map((item, index) => {
                        return (
                          <Select.Option title={item.title} value={item.value} key={index}>
                            {item.title}
                          </Select.Option>
                        );
                      })}
                  </Select>,
                )}
              </FormItem>
            </Col>
          </Row>
          <Row style={{ marginBottom: '10px' }}>
            <Col span={12}>
              <TradingDirectC form={this.props.form} title={'交易方向'} rules={[{ required: isRequired, message: '请选择交易方向!' }]} dataIndex={'tradeDir'} businessType='18' />
            </Col>
            <Col span={12}>
              <InputC title={'交易总额'} suffix={'元'} rules={[{ required: isRequired, message: '请输入交易总额!' }]} dataIndex={'tradeAmount'} form={this.props.form} />
            </Col>
          </Row>
        </Form>
        <div>
          <PrimaryGhostC style={{ float: 'right', margin: '0 10px' }} title={'取消'} onClick={this.onCancel} />
          <PrimaryC style={{ float: 'right', margin: '0 10px' }} title={'确定'} onClick={this.onOk} />
        </div>
      </div>
    );
  }
}
export default connect(({ cashOrderM, loading }) => ({
  cashOrderM,
  loading,
}))(TradeAnalysisNew);
